<template>
    <div>
        <table border="1">
            <tbody>
                <tr>
                    <th>房间名称</th>
                    <th>
                        <input type="text" v-model="data.Name">
                    </th>
                </tr>
                <tr>
                    <th>销售价格</th>
                    <th>
                        <input type="text" v-model="data.Price">
                    </th>
                </tr>
                <tr>
                    <th>房间数量</th>
                    <th>
                        <input type="text" v-model="data.Num">
                    </th>
                </tr>
                <tr>
                    <th>状态</th>
                    <th>
                        <input type="radio" v-model="data.State" name="State" value="true">启用
                        <input type="radio" v-model="data.State" name="State" value="false">禁用
                    </th>
                </tr>
                <tr>
                    <th>房间号</th>
                    <th>
                        <span v-for="h in hbbys">
                            <input type="checkbox" v-model="hb" :value="h" >
                        </span>
                    </th>
                </tr>
                <tr>
                    <th>房间总数</th>
                    <th>
                        <input type="text" v-model="data.HomeCount">
                    </th>
                </tr>
                <tr>
                    <th>
                        <input type="button" value="修改" @click="Up">
                    </th>
                    <th>
                        <input type="button" value="确定" @click="Statrt">
                    </th>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref } from 'vue';
import { onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';

const Statrt=()=>{
    alert(hb.value.length)
}


const data=ref({
    "Id": 0,
  "Name": "string",
  "Price": 0,
  "Num": 0,
  "State": true,
  "HomeNum": "string",
  "Delete": true,
  "HomeCount":""
})




const hbs=ref(["8301,8302,8303,8501,8502,8201,8301,5201,5202"])

const hbbys=ref(["8301","8302","8303","8501","8502","8201","5201","5202"])

const hb=ref([])

onMounted(()=>{
    Fantian();
})


const rou=useRoute();

const Fantian=()=>{
    var val=rou.query.Id;

    axios.get("https://localhost:7039/api/Member/Detail",{params:{Id:val}}).then(res=>{
        data.value=res.data;
        hb.value=data.value.HomeNum.split(',');
    })



}

const routers=useRouter();

const Up=()=>{
    if(data.value.Name==""){
        alert('房间名称不能为空');
        return;
    }
    

        axios.put("https://localhost:7039/api/Member/UpdateMember",data.value).then(res=>{
        if(res.data>0){
            alert('修改成功')
            routers.push({path:'/'})
        }
        else{
            alert('修改失败')
        }
    })
   

}



</script>

